<template>
  <div id="select-template" class="jx-content">
    <el-dialog width="600px" class="dialog-modal" title="章节详情" :visible.sync="dialogXiangqing">
      <div class="dialog-content" style="height:420px;padding-bottom:30px;;">
        <el-scrollbar :native="false">
          <div class="dialog-box">
            <div class="dialog-item muban-content" style="border:none;">
              <div class="muban-title">章节分数分配列表</div>
              <div class="muban-item">
                <div>1.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>2.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>3.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>4.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-item">
                <div>5.大数据概念 5分 </div>
                <div>选择题 2题</div>
                <div>编程题 4题</div>
                <div>填空题 4题</div>
              </div>
              <div class="muban-score">试卷总分数：100分</div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog>
    <el-dialog :width="dialogModalSwitch?'1200px':'600px'" class="dialog-modal" title="添加模板" :visible.sync="dialogModal">
      <div class="dialog-content">
        <div class="switch-box" :class="{ 'switch-box-true': !dialogModalSwitch }">
          <el-switch v-model="dialogModalSwitch" inactive-text="按章节选择"></el-switch>
        </div>
        <div class="dialog-box">
          <div class="dialog-item" :class="{ 'item-bg': dialogModalSwitch }">
            <el-form ref="form" :model="sizeForm" label-width="">
              <el-form-item label="章节名称" class="zhangjie">
                <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="form-item-flex">
                <span>选择题数量</span>
                <el-input v-model="sizeForm.name"></el-input>
                <span class="question-num">题库中10题</span>
                <span>每题分数</span>
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item class="form-item-flex">
                <span>判断题数量</span>
                <el-input v-model="sizeForm.name"></el-input>
                <span class="question-num">题库中10题</span>
                <span>每题分数</span>
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item class="form-item-flex">
                <span>实验题数量</span>
                <el-input v-model="sizeForm.name"></el-input>
                <span class="question-num">题库中10题</span>
                <span>每题分数</span>
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item class="form-item-flex">
                <span>填空题数量</span>
                <el-input v-model="sizeForm.name"></el-input>
                <span class="question-num">题库中10题</span>
                <span>每题分数</span>
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item class="form-item-flex">
                <span>简答题数量</span>
                <el-input v-model="sizeForm.name"></el-input>
                <span class="question-num">题库中10题</span>
                <span>每题分数</span>
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
            </el-form>
            <div v-show="!dialogModalSwitch" class="question-left-score">试卷总分数：100分</div>
          </div>
          <div v-show="dialogModalSwitch" class="dialog-item muban-content">
            <div class="muban-title">章节分数分配列表</div>
            <div class="muban-item">
              <div>1.大数据概念 5分 </div>
              <div>选择题 2题</div>
              <div>编程题 4题</div>
              <div>填空题 4题</div>
            </div>
            <div class="muban-item">
              <div>2.大数据概念 5分 </div>
              <div>选择题 2题</div>
              <div>编程题 4题</div>
              <div>填空题 4题</div>
            </div>
            <div class="muban-item">
              <div>3.大数据概念 5分 </div>
              <div>选择题 2题</div>
              <div>编程题 4题</div>
              <div>填空题 4题</div>
            </div>
            <div class="muban-item">
              <div>4.大数据概念 5分 </div>
              <div>选择题 2题</div>
              <div>编程题 4题</div>
              <div>填空题 4题</div>
            </div>
            <div class="muban-item">
              <div>5.大数据概念 5分 </div>
              <div>选择题 2题</div>
              <div>编程题 4题</div>
              <div>填空题 4题</div>
            </div>
            <div class="muban-score">试卷总分数：100分</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogModal = false">保存模板</el-button>
      </span>
    </el-dialog>
    <div class="select-content">
      <div class="btn-group text-right btn-group-top">
        <div class="button-style" @click="dialogModal = true">添加模板</div>
      </div>
      <div class="radio-box">
        <el-radio v-model="radio" label="1">全部模板</el-radio>
        <el-radio v-model="radio" label="2">带章节模板</el-radio>
        <el-radio v-model="radio" label="3">无章节模板</el-radio>
      </div>
      <div class="modal-list">
        <div class="block">
          <el-carousel trigger="click" height="270px" :autoplay="false" indicator-position="none">
            <el-carousel-item>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <div class="look-question-content active">
                      <div class="look-question-item">
                        <div>选择题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>填空题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>判断题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>简答题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>编程题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>实验题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-score">总分数：100分</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <div class="look-question-content">
                      <div class="look-question-item">
                        <div>选择题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>填空题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>判断题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>简答题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>编程题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>实验题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-score">总分数：100分</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div class="look-question-content has-zhangjie active">
                      <div class="look-question-title fs16 fbold text-left">章节分数分配列表</div>
                      <div class="look-question-item">
                        <div>1.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-item">
                        <div>2.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-item">
                        <div>3.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-item">
                        <div>4.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-operation">
                        <a href="javascript:;" @click="dialogXiangqing = true">详情</a>
                        <a href="#">删除</a>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-carousel-item>
            <el-carousel-item>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <div class="look-question-content active">
                      <div class="look-question-item">
                        <div>选择题</div>
                        <div>20题</div>
                        <div>每题3分</div>
                      </div>
                      <div class="look-question-item">
                        <div>填空题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>判断题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>简答题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>编程题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>实验题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-score">总分数：100分</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <div class="look-question-content">
                      <div class="look-question-item">
                        <div>选择题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>填空题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>判断题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>简答题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>编程题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-item">
                        <div>实验题</div>
                        <div>10题</div>
                        <div>每题2分</div>
                      </div>
                      <div class="look-question-score">总分数：100分</div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div class="look-question-content has-zhangjie active">
                      <div class="look-question-title fs16 fbold text-left">章节分数分配列表</div>
                      <div class="look-question-item">
                        <div>1.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-item">
                        <div>2.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-item">
                        <div>3.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-item">
                        <div>4.大数据概念</div>
                        <div>5分</div>
                        <div>选择题 2题</div>
                        <div>编程题 2题</div>
                        <div>填空题 2题</div>
                      </div>
                      <div class="look-question-operation">
                        <a href="javascript:;" @click="dialogXiangqing = true">详情</a>
                        <a href="#">删除</a>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="btn-group text-center">
      <div class="button-style">确 定</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "1",
      //添加模板弹出框
      dialogModal: false,
      dialogWidth: "600px",
      //弹出框开关
      dialogModalSwitch: false,
      //章节详情弹出
      dialogXiangqing: false,
      sizeForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#select-template {
  width: 1200px;
  margin: 50px auto;
  padding: 30px 10px;
  .btn-group-top {
    margin-right: 60px;
  }
  .radio-box {
    text-align: center;
  }
  .select-content {
    .button-style {
      margin-right: 10px;
    }
    a {
      vertical-align: middle;
    }
    .modal-list {
      padding: 30px 0;
      .el-row {
        padding: 0 70px;
      }
      .look-question-content {
        cursor: pointer;
        color: #727272;
        position: relative;
        // width: 280px;
        height: 270px;
        padding: 20px 34px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e8e8e8;
        .look-question-title {
          border-bottom: 2px solid #e8e8e8;
          padding-bottom: 10px;
        }
        .look-question-item {
          display: flex;
          justify-content: space-between;
          line-height: 32px;
          border-bottom: 1px solid #e8e8e8;
          padding: 0 6px;
          font-size: 14px;
        }
        .look-question-score {
          font-size: 14px;
          text-align: left;
          padding-right: 8px;
          line-height: 50px;
        }
        .look-question-operation {
          font-size: 14px;
          text-align: left;
          line-height: 50px;
          padding-right: 8px;
        }
      }
      .look-question-content.has-zhangjie {
        .look-question-item {
          line-height: 38px;
        }
      }
      .look-question-content.active {
        border-color: $btn-blue;
        &:after {
          font-family: "iconfont";
          content: "\e614";
          color: rgb(63, 219, 155);
          position: absolute;
          right: 10px;
          bottom: 0px;
        }
      }
      .look-question-content:hover {
        border-color: $btn-blue;
      }
    }
  }
  .upload-file {
    margin: 10px 0 0 0;
    .iconfont {
      font-size: 24px;
      vertical-align: sub;
      color: $blue;
      margin: 0 0 0 10px;
    }
  }
  .btn-group {
  }
  .dialog-modal {
    .dialog-content {
      padding: 0 16px;
      .switch-box {
        position: relative;
        margin-bottom: 24px;
        .is-active {
          color: #474747;
        }
      }
      .switch-box-true{
        margin-left: 30px;
      }
      .dialog-box {
        display: flex;
        justify-content: space-between;
        .dialog-item {
          width: 540px;
          height: 400px;
          background: #fff;
          box-sizing: border-box;
          border: 1px solid #fff;
          .el-input {
            width: auto;
          }
          .el-input__inner {
            width: 80px;
          }
          .form-item-flex {
            .el-form-item__content {
              display: flex;
              justify-content: space-between;
            }
          }
          .question-num {
            color: #c5c5c5;
          }
          .muban-title {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #e8e8e8;
            padding-bottom: 10px;
          }
          .muban-score {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: $blue;
            line-height: 70px;
          }
          .question-left-score {
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: $blue;
            line-height: 46px;
          }
          .muban-item {
            display: flex;
            justify-content: space-between;
            line-height: 52px;
            border-bottom: 1px solid #e8e8e8;
          }
        }
        .muban-content {
          padding: 20px 40px 0;
          border-color: #e8e8e8;
        }
        .dialog-item.item-bg {
          border-color: #e8e8e8;
        }
        .zhangjie {
          margin: 10px 0 22px 20px;
          .el-input__inner {
            width: 180px;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding: 10px 20px 36px;
    }
  }
}
</style>
